<template>
	<view class="usercontain">

	
		<view class="contain">
			<view class="userifo">
				<view class="headcont">
						<image src="../../static/image/header3.png" mode=""></image>
				</view>
				<view class="namecont">
					<view class="usersname">
						<text class="name">张三</text>
						<view class="icon">
							<image src="../../static/icon/more_arrow.png" mode=""></image>
						</view>
					</view>
					<view class="callcont">
						<callicon title = "一级会员"/>
						<callicon title = "老铁"/>
						<callicon title = "钻石"/>
						<callicon title = "和尚称号"/>
					</view>
				</view>
			</view>
			<view class="navcolumn">
				<navcolumn title="余额" num="0" unit="元" btntxt="充值提现" />
				<navcolumn title="余额" num="0" unit="元" btntxt="充值提现"/>
				<navcolumn title="余额" num="0" unit="元" btntxt="充值提现"/>
			</view>
			<view class="sharecont">
				<view class="sharemess">
					<text>2</text>
					次分享
				</view>
				<view class="gotoshare">
					<view class="sharebtn">
						去分享
					</view>
					<text>
						分享规则
					</text>
				</view>
				
			</view>
			<view class="sharecont">
				<view class="sharemess">
					<view class="newsicon">
						<image src="../../static/icon/message.png" mode=""></image>
					</view>
					<view class="goodnews">
						<text>特大好消息首次充值奖励十元现金</text>
					</view>
				</view>
				
			</view>
			<view   class="user_info_cont " style="margin: 15rpx 0; border-radius: 15rpx;">
				<UserInfo v-for = "(item,index) of userinfo" 
				:title="item.title" 
				:iconUrl="item.iconUrl"
				:key = "index"
				:hrefto = "item.navigateto"
				/>		
			</view>
			<view class="heshang_notice">
				<view class="heshang_title">
					<text class="heshang">我是合商</text>
					<view class="heshang_get">
						总收益: <text style="color: #F83723;">123</text>元
					</view>
				</view>
				<navigator class="heshang_detail" url="">
					<view class="_detailtitle">
						收益详情
					</view>
					<uni-icons type="forward" color="#BEAB4A" size="18" class='icon'></uni-icons>
				</navigator>
			</view>
		<view  class="user_info_cont">
					<UserInfo v-for = "(item,index) of heshang" 
					:title="item.title" 
					:iconUrl="item.iconUrl"
					:key = "index"
					:hrefto = "item.navigateto"
					:add_icon="item.add_icon"
					/>		
				</view>
		</view>
	
	</view>
</template>

<script>
		import callicon from "../../plugins/call-icon/call-icon.vue"
		import navcolumn from "../../plugins/nav_column/nav_column.vue"
		import UserInfo from "../../plugins/user_info/user_info.vue"
	export default {
		
		data() {
			return {
				userinfo:[
					{"title":"我的订单","iconUrl":"/static/icon/userinfo/order.png","navigateto":"pages/user/userAll/order/order"},
					{"title":"收货地址","iconUrl":"/static/icon/userinfo/address.png","navigateto":"/pages/user/userAll/address/address"},
					{"title":"我的收藏","iconUrl":"/static/icon/userinfo/collect.png","navigateto":"/pages/collection/collection"},
					{"title":"评价反馈","iconUrl":"/static/icon/userinfo/comment.png","navigateto":""},
					{"title":"关于我们","iconUrl":"/static/icon/userinfo/about.png","navigateto":""},
					],
					heshang:[
						{"title":"录入保单 ","iconUrl":"/static/icon/userinfo/order.png","navigateto":"/pages/index/index"},
						{"title":"个人商城 ","iconUrl":"/static/icon/userinfo/address.png","navigateto":"/pages/shop/shop3/shop3"},
						{"title":"兑换券 ","iconUrl":"/static/icon/userinfo/collect.png","navigateto":""},
						{"title":"我的客户","iconUrl":"/static/icon/userinfo/comment.png","navigateto":"","add_icon":["添加客户"]},
						{
							"title":"团队管理 ","iconUrl":"/static/icon/userinfo/about.png","navigateto":"",
							"add_icon":["添加新成员","给团队发通知"]
						},
						{"title":"快速核验  ","iconUrl":"/static/icon/userinfo/about.png","navigateto":""},
						{"title":"常用内容  ","iconUrl":"/static/icon/userinfo/about.png","navigateto":""},
						{"title":"专属福利商城 ","iconUrl":"/static/icon/userinfo/about.png","navigateto":""},
					]
			}
		},
		methods: {
			
		},
		components:{
			callicon,navcolumn,UserInfo
		}
	}
</script>

<style scoped lang="scss">
	$bs-font-color:#666666;
	.usercontain{
		display: flex;
		flex-direction: column;
		background: #F7F7F7;
		background-size: 100% auto;
		padding: 0rpx 18rpx 0;
		margin-top: 28rpx;
		box-sizing: border-box;
	}
	.contain{
		
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	.containtop{		
		height: 350rpx;
	}
	.userifo{
		width: 100%;
		height:110rpx;
		box-sizing: border-box;
		padding-left: 10rpx;
		display: flex;
	}
	.headcont{
		height: 110rpx;
		width: 110rpx;
	}
		.headcont>image{
		height: 100%;
		width: 100%;
	}
	.namecont{
		
		height: 100%;
		margin-left: 24rpx;
	}
	.namecont .usersname{
		display: flex;
		height: 35rpx;
		margin-top: 25rpx;
		align-items: center;
		margin-bottom: 13rpx;
	}
	.namecont .usersname .name{
		height: 100%;
		line-height: 35rpx;
		font-size: 32rpx;
	}
	.namecont .usersname .icon{
		height: 20rpx;
		width: 12rpx;
		line-height: 20rpx;
		margin-left: 23rpx;
	
	}
	.namecont .usersname .icon image{
		width: 100%;
		height: 100%;
	}
	.callcont{
		display: flex;
	
	}
	.navcolumn{
		height: 165rpx;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 50rpx;
		justify-content: space-between;
		border-radius:$base-radius;
		margin-top: 25rpx;
		background: #FFFCE9;
	}
	.navcolumn navcolumn{
		border-right: 1px solid #E6E4E4;
	}
	.navcolumn navcolumn:last-child{
		border: none;
	}
	.sharecont{
		width: 100%;
		height: 92rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		margin-top: 15rpx;
		color: $bs-font-color;
		background-color: #fff;
		border-radius: $base-radius;
		font-size: 27rpx;
		padding:0 47rpx 0  29rpx;
	}
	.sharecont .sharemess{
		box-sizing: border-box;
		height: 100%;
		display: flex;
		align-items: center;
	
	}
	.gotoshare{
		
		display: flex;
		height: 100%;
		align-items: center;
	}
	.gotoshare .sharebtn{
		display: flex;
		box-sizing: border-box;
		padding: 14rpx 34rpx 18rpx 37rpx;
		background-color: #F8321D;
		border-radius: 40rpx;
		color: #fff;
		margin-right: 27rpx;
	}
	.newsicon{
		height: 29rpx;
		width: 35rpx;
		margin-right: 10rpx;
	}
	.newsicon image{
		width: 100%;
		height: 100%;
	}
	.user_info_cont{
		background-color: #fff;
		display: flex;
		position: relative;
		box-sizing: border-box;
		flex-direction: column;
		
		width: 100%;
		color: #666666;
		font-size: 27rpx;
		padding:19rpx 54rpx 60rpx  29rpx;
		
	}
	.user_info_cont:last-child{
		margin-bottom: 34rpx;
	}
	.heshang_notice{
		width: 100%;
		height: 90rpx;
		background-color: #FFFCE9;
		padding: 0 54rpx 0 29rpx;
		box-sizing: border-box;
		border-radius: $base-radius;
		display: flex;
		justify-content: space-between;
	}
	.heshang_title{
		display: flex;
		height: 100%;
		align-items: center;
		font-size: 28rpx;
	}
	.heshang{
		margin-right: 51rpx;
		font-weight: 900;
	}
	.heshang_get{
		color: #666666;
	}
	.heshang_detail{
		display: flex;
		height: 100%;
		align-items: center;
		
	}
	.icon{
	
		margin-left: 19rpx;
	}
	._detailtitle{
		font-size: 28rpx;
		color:#F8321D;
	}
</style>
